<template>
    <div class="wrapper1">
        <HeaderNav
                :title="shopName"
        ></HeaderNav>
        <div class="bigImage">
            <img :src="shop.image.url"/>
        </div>
        <div class="userImageWrapper">
            <div class="userImage">
                <img :src="shop.user.image.url" alt="">
            </div>
        </div>
        <div class="profile1">
            <div class="name">REN177</div>
            <div class="desc">生活不止眼前的苟且，还有远方的苟且</div>
        </div>
        <div class="row3">
            <div class="item">SINCE 2010-11-11</div>
            <div class="item"> 43 作品</div>
            <div class="item">关注</div>
        </div>
        <div class="in-scroll">
            <div class="wrapper-loading"
                 v-infinite-scroll="loadMore"
                 infinite-scroll-disabled="loading"
                 infinite-scroll-distance="10"
            >
                <div class="wrapper">
                    <div class="item" v-for="(item,key) in lists" :key="key">
                        <img :src="item.image.url" alt="">
                        <div class="profile">
                            <div>{{item.title}}</div>
                            <FavBtn :designId="item.objectId"/>
                        </div>
                    </div>
                </div>
                <div :style="{opacity: loading1?1:0}" class="loading-div">loading</div>
            </div>
        </div>

        <div class="bottom">
            <div class="bottomItem" @click="$router.push('/')">
                <SvgIcon icon="icon-xingzhuangcheng" class="icon"></SvgIcon>
                <div class="text">首页</div>
            </div>
            <div class="bottomItem" @click="$router.push('/allType')">
                <SvgIcon icon="icon-fenlei1" class="icon"></SvgIcon>
                <div class="text">分类</div>
            </div>
            <div class="bottomItem" @click="$router.push('/shopcart')">
                <SvgIcon icon="icon-gouwuche1" class="icon"></SvgIcon>
                <div class="text">购物车</div>
            </div>
            <div class="bottomItem" @click="$router.push('/myself')">
                <SvgIcon icon="icon-geren" class="icon"></SvgIcon>
                <div class="text">个人</div>
            </div>
        </div>

    </div>
</template>
<script>
    import HeaderNav from '../../components/HeaderNav'
    import {get_shop_detail_by_name, getShopDesign} from "./service";
    import withStore from "../../vuex/withStore";
    import {getbestSales} from "../home/row3/home_bestSales_scrollList/service";
    import FavBtn from '../../components/favBtn'
    import SvgIcon from '../../components/svgIcon'

    export default withStore({
        components: {
            HeaderNav, FavBtn, SvgIcon
        },
        data() {
            return {
                shopName: "",
                shop: {image: {url: ""}, user: {image: {url: ""}}},
                page: {offset: 0, limit: 10},
                lists: [],
                loading1: false
            }
        },
        mounted() {
            var self = this
            this.shopName = this.$route.params.name
            get_shop_detail_by_name(this.shopName).then(shop => {
                self.shop = shop
                self.loadMore()
            })
        },
        methods: {
            loadMore() {
                var self = this
                self.loading1 = true
                getShopDesign({shopId: self.shop.objectId, page: this.page}).then(lists => {
                    if (lists && lists.length) {
                        var _list = self.lists.concat(lists)
                        self.page.offset = self.page.offset + self.page.limit
                        self.lists = _list
                    }
                })
                setTimeout(() => {
                    self.loading1 = false
                }, 500)
            }
        }
    })
</script>
<style lang="less" scoped>
    .wrapper1 {
        .bigImage {
            height: 100px;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .userImageWrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            top: -20px;
            .userImage {
                width: 50px;
                height: 50px;
                img {
                    border: 2px solid #eee;
                    border-radius: 100%;
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .profile1 {
            flex-direction: column;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .row3 {
            margin-top: 10px;
            padding-right: px2rem(40);
            padding-left: px2rem(20);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .in-scroll {
            margin-top: 20px;
            .loading-div {
                height: px2rem(100);
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .wrapper {
                padding-left: px2rem(10);
                padding-right: px2rem(10);
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                .item {
                    margin-bottom: 10px;
                    width: 49%;
                    .profile {
                        display: flex;
                        justify-content: space-between;
                        height: px2rem(50);
                    }
                    img {
                        max-width: 100%;
                        height: px2rem(400);
                    }

                }
            }
        }

    }

    .bottom {
        display: flex;
        justify-content: space-between;
        padding-left: px2rem(40);
        padding-right: px2rem(40);
        padding-top: px2rem(20);
        padding-bottom: px2rem(20);
        position: fixed;
        bottom: 0;
        left: 0;
        max-width: 750px;
        width: 100%;
        border-top: 1px solid #eee;
        background: #fff;
        .bottomItem {
            text-align: center;
            .icon {
                font-size: 20px
            }
        }

    }
</style>